<template>
  <div class="changeArtical">
    <h1>{{mode?"添加文章":"编辑文章"}}</h1>
    <div class="content">
      <el-form>
        <el-form-item label="文章名称" label-width="100px">
          <el-input v-model="articalObj.articalName"></el-input>
        </el-form-item>
        <el-form-item label-width="100px" label="文章分类">
          <el-select v-model="articalObj.classId">
            <el-option
              v-for="(item,index) in classify"
              :key="index"
              :label="item.className"
              :value="item.classId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="100px">
          <div ref="editor" style="text-align:left"></div>
        </el-form-item>
        <el-form-item label-width="100px">
          <el-button type="primary" @click="sure">确定</el-button>
          <el-button type="default">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    {{getArticalObj}}
  </div>
</template>
<script>
import { getClassfy,addArtical,getOneArtical, editArtical} from "@/api";
import {mapGetters} from 'vuex';
import E from "wangeditor";
export default {
  data() {
    return {
      mode: true, //true表示添加， false表示编辑
      articalObj: {
        articalName: "",
        classId: "",
        content: "",
        status:1,
      },
      classify: []
    };
  },
  created() {
    this.getClassfy();
    // console.log(this.$route.params.articalId)
    // if(this.$route.params.articalId){
    //    this.getOneArtical(this.$route.params.articalId)
    // }
    // console.log(this.getArticalObj,12345)
    if(this.getArticalObj.articalId){
      this.articalObj.articalName = this.getArticalObj.articalName;
      this.articalObj.status = this.getArticalObj.status;
      this.articalObj.content = this.getArticalObj.content;
      this.getOneArtical(this.getArticalObj.articalId);
    }
  },
  mounted() {
    this.editor()
  },
  computed:{
    ...mapGetters("artical",['getArticalObj'])
  },
  methods: {
    editArtical(){
      var newObj = JSON.parse(JSON.stringify(this.articalObj));
      newObj.articalId = this.getArticalObj.articalId;
      editArtical(newObj).then(res =>{
          // console.log(res)
          if(res.code == 200 && res.msg == "编辑成功"){
            this.$router.push({name:"articalindex"})
          }
      })
    },
    editor(){
      this.$nextTick(() => {
      this.editor = new E(this.$refs.editor);
      this.editor.customConfig.onchange = html => {
        this.articalObj.content = html;
      };
      this.editor.customConfig.zIndex = 1;
      this.editor.create();
      this.editor.txt.html(`<p>${this.articalObj.content}</p>`);
    });
    },
    getClassfy(){
      getClassfy().then(data =>{
        // console.log(data)
        if(data.code == 200 && data.msg == '成功'){
          this.classify = data.data;
        }
      })
    },
    addArtical(){
      addArtical(this.articalObj).then(data =>{
        // console.log(data)
        if(data.code == 200 && data.msg == "添加文章成功"){
          this.$router.push({name:"articalindex"})
        }
      })
    },
    sure(){
      // console.log(this.articalObj);     
      if(this.getArticalObj.articalId){
        this.editArtical()
      }else {
        this.addArtical();
      }
    },
    getOneArtical(id){
      getOneArtical(id).then(data =>{
        // console.log(data)
        if(data.code == 200 && data.msg == "查询成功"){
          // this.articalObj.articalName = data.data.articalName;
          // this.articalObj.status = data.data.status;
          this.articalObj.classId = data.data.classId;
          // this.articalObj.content = data.data.content;
          // this.editor = new E(this.$refs.editor);
          // this.editor.customConfig.onchange = html => {
          // this.articalObj.content = html;
          // };
          // this.editor.customConfig.zIndex = 1;
          // this.editor.create();
          // this.editor.txt.html(`<p>${this.articalObj.content}</p>`);
        }
      })
    }
  }
};
</script>

<style lang="less" scoped>
.changeArtical {
  width: 100%;
  min-height: calc(100vh - 98px);
  background-color: #fff;
  padding: 15px;
  height: 2000px;
  h1 {
    font-size: 28px;
    border-bottom: 1px solid #ccc;
    height: 40px;
  }
  .content {
    width: 800px;
    padding-top: 20px;
  }
}
</style>